<template lang="html">
  <div class="icons border-top" :options="swiperOption">
    <swiper class="iconswiper">
      <swiper-slide v-for="(page, index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-imgbox">
            <!-- <span class="icon-img iconfont">&#xe607;</span> -->
            <img class="icon-img" :src="item.imgUrl" alt="">
          </div>
          <p class="icon-title">{{item.title}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  computed: {
    pages () {
      const pages = []
      this.iconlist.forEach((item, index) => {
        let page = Math.floor(index / 10)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      },
      iconlist: [{
        id: '0001',
        // url: '&#xe60b;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        title: '美食'
      }, {
        id: '0002',
        // url: '&#xe60a;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
        title: '猫眼电影'
      }, {
        id: '0003',
        // url: '&#xe609;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',
        title: '酒店'
      }, {
        id: '0004',
        // url: '&#xe608;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
        title: '休闲娱乐'
      }, {
        id: '0005',
        // url: '&#xe607;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
        title: '外卖'
      }, {
        id: '0006',
        // url: '&#xe606;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
        title: 'KTV'
      }, {
        id: '0007',
        // url: '&#xe605;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png',
        title: '周边游'
      }, {
        id: '0008',
        // url: '&#xe603;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ed/cf572be30fc32f02.png',
        title: '丽人'
      }, {
        id: '0009',
        // url: '&#xe604;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
        title: '小吃快餐'
      }, {
        id: '00010',
        // url: '&#xe604;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        title: '机票/火车票'
      }, {
        id: '00011',
        // url: '&#xe604;',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ed/cf572be30fc32f02.png',
        title: '生活服务'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .icons
    width: 100%
    height: 3.6rem;
    .iconswiper
      width: 100%
      height: 3.6rem;
      .icon
        width: 20%
        height: 1.62rem
        position: relative
        float: left
        padding: .2rem 0
        box-sizing: border-box
        .icon-imgbox
          position: absolute
          left: 0
          right: 0
          text-align: center
          .icon-img
            width: .9rem
            height: .9rem
        .icon-title
          position: absolute
          left: 0
          right: 0
          bottom: .15rem
          text-align: center
          font-size: .24rem
</style>
